<template>
  <div>
    <div style="margin:0 30px" v-if="!show">
      <Row>
        <Col span="22">
          数据类型：
        </Col>
        <Col span="2">
          <Button type="primary" @click="changeSearch" :loading="loading"
            >查询</Button
          >
        </Col>
      </Row>
      <Form
        ref="dataValidate"
        :model="formValidate"
        :rules="ruleValidate"
        inline
      >
        <FormItem v-if="+type !== 3" prop="exportDate">
          <DatePicker
            v-model="formValidate.exportDate"
            type="daterange"
            placement="bottom-end"
            placeholder="请选择导入时间"
            style="width: 200px"
          ></DatePicker>
        </FormItem>
        <FormItem prop="department_id">
          <Select
            placeholder="请选择部门"
            v-model="formValidate.department_id"
            style="width: 200px"
            clearable
          >
            <Option
              v-for="item in select_department_list"
              :key="item.value"
              :value="item.value"
              :style="{
                color: item.value == 0 ? '#ed4014' : '',
              }"
              >{{ item.label }}
            </Option>
          </Select>
        </FormItem>
        <FormItem v-if="+type !== 3" prop="last_belong_member_id">
          <Select
            placeholder="请选择上次归属人"
            v-model="formValidate.last_belong_member_id"
            style="width: 200px"
            multiple
          >
            <Option
              v-for="item in last_belong_member_list"
              :key="item.value"
              :value="item.value"
              :style="{
                color: item.value != 0 && item.status == 0 ? '#ed4014' : '',
              }"
              >{{
                item.value == 0
                  ? "无归属人"
                  : item.label + `${item.status == 0 ? "-离职" : ""}`
              }}
            </Option>
          </Select>
        </FormItem>
        <FormItem v-else prop="belong_member_id">
          <Select
            placeholder="请选择归属人"
            v-model="formValidate.belong_member_id"
            style="width: 200px"
            multiple
            clearable
          >
            <Option
              v-for="item in belong_member_list"
              :key="item.value"
              :value="item.value"
              >{{ item.value == 0 ? "无归属人" : item.label }}
            </Option>
          </Select>
        </FormItem>
        <FormItem prop="last_callback_id">
          <Select
            placeholder="请选择上次回访人"
            v-model="formValidate.last_callback_id"
            style="width: 200px"
            clearable
          >
            <OptionGroup
              :label="item.label"
              v-for="item in member_list"
              :key="item.value"
            >
              <Option
                v-for="its in item.children"
                :value="its.value"
                :key="its.value"
                >{{ its.label }}</Option
              >
            </OptionGroup>
          </Select>
        </FormItem>
        <FormItem prop="patient_status_id">
          <Select
            placeholder="请选择患者状态"
            v-model="formValidate.patient_status_id"
            style="width: 200px"
            clearable
          >
            <Option
              v-for="item in statusList"
              :value="`${item.id}`"
              :key="item.id"
              >{{ item.status_name }}</Option
            >
          </Select>
        </FormItem>
        <br />
        <FormItem prop="patient_diseases_id">
          <TreeSelect
            placeholder="请选择病种"
            v-model="formValidate.patient_diseases_id"
            :max-tag-count="3"
            :data="diseases"
            style="width: 200px"
            multiple
          />
        </FormItem>
        <FormItem prop="channel_id">
          <TreeSelect
            :max-tag-count="3"
            placeholder="请选择渠道"
            v-model="formValidate.channel_id"
            :data="source_channel"
            transfer
            style="width: 200px"
            clearable
          />
        </FormItem>
        <FormItem prop="tags_ids">
          <Select
            placeholder="请选择部门标签"
            v-model="formValidate.tags_ids"
            style="width: 200px"
            multiple
          >
            <Option
              v-for="item in tags_list"
              :value="`${item.value}`"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem prop="createdDate">
          <DatePicker
            type="daterange"
            v-model="formValidate.createdDate"
            placement="bottom-end"
            placeholder="请选择创建时间"
            style="width: 200px"
          ></DatePicker>
        </FormItem>
        <FormItem prop="have_contact_type">
          <Select
            placeholder="请选择电话微信"
            v-model="formValidate.have_contact_type"
            style="width: 200px"
            multiple
          >
            <Option
              v-for="item in callList"
              :value="`${item.value}`"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem prop="have_repeat">
          <Select
            v-model="formValidate.have_repeat"
            style="width: 100px"
            placeholder="全部"
            clearable
          >
            <Option value="1" label="重复">重复</Option>
            <Option value="2" label="不重复">不重复</Option>
          </Select>
        </FormItem>
        <br />
        <div style="font-size:16px">
          <span>数据数量：</span>
          <span style="color:#2b85e4;font-size:18px" v-if="totalshow">{{
            total
          }}</span>
          <span style="position:relative" class="ivu-ml-16" v-else>
            <Spin fix>
              <Icon
                type="ios-loading"
                size="18"
                class="demo-spin-icon-load"
              ></Icon>
            </Spin>
          </span>
        </div>
        <Divider />
        <div>分配至：</div>
        <FormItem>
          <RadioGroup v-model="radiotype">
            <Radio :label="0">患者</Radio>
            <Radio :label="1" v-if="+type !== 2">鱼池</Radio>
            <Radio :label="2" v-if="type == 3 || type == 2">公海</Radio>
            <!-- <Radio v-for="item in radioList" :key="item.id" :label="item.id" >{{item.name}}</Radio> -->
          </RadioGroup>
        </FormItem>
        <br />
        <FormItem v-if="radiotype === 0" prop="allot_department_id">
          <Select
            placeholder="请选择部门"
            v-model="formValidate.allot_department_id"
            style="width: 200px"
            @on-change="changeDept"
          >
            <Option
              v-for="item in department_list"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem v-if="radiotype === 0" prop="allot_member_ids">
          <Select
            placeholder="请选择归属人"
            v-model="formValidate.allot_member_ids"
            style="width: 200px"
            multiple
          >
            <Option
              v-for="item in member_list"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem v-if="radiotype === 0" prop="allot_tag_id">
          <Select
            placeholder="请选择部门标签"
            v-model="formValidate.allot_tag_id"
            style="width: 200px"
            filterable
            clearable
          >
            <Option
              v-for="item in tags_list"
              :value="`${item.value}`"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </FormItem>
        <FormItem v-if="radiotype === 0" prop="allot_subdivided_channels_id">
          <Select
            placeholder="请选择渠道"
            v-model="formValidate.allot_subdivided_channels_id"
            style="width: 200px"
            filterable
            clearable
          >
            <OptionGroup
              :label="item.title"
              v-for="item in allot_source_channel"
              :key="item.value"
            >
              <Option
                v-for="its in item.children"
                :value="`${its.value}`"
                :key="its.value"
                >{{ its.title }}</Option
              >
            </OptionGroup>
          </Select>
        </FormItem>
        <div style="text-align: right;">
          <Button
            type="primary"
            :loading="formloading"
            @click="handleSubmit('dataValidate')"
            >分配</Button
          >
          <Button @click="handleReset('dataValidate')" style="margin-left: 8px"
            >重置</Button
          >
        </div>
      </Form>
    </div>
    <div v-else>
      <Spin>
        <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
      </Spin>
    </div>
  </div>
</template>
<script>
import {
  allotList,
  allotTotal,
  allotv2,
  getDeptMember,
} from "@/api/allocation.js";
export default {
  data() {
    return {
      dataValidate: "dataValidate",
      formValidate: {
        exportDate: ["", ""],
        createdDate: ["", ""],
        department_id: "",
        patient_diseases_id: [], // 病种
        last_belong_member_id: [], // 上次归属人
        belong_member_id: [], // 归属人
        last_callback_id: "", // 上次回访人
        channel_id: "", // 渠道
        patient_status_id: "",
        tags_ids: [],
        allot_department_id: "",
        allot_member_ids: [],
        allot_tag_id: "",
        allot_subdivided_channels_id: "",
        have_contact_type: [],
        have_repeat: "0",
      },
      total: "",
      radiotype: 0,
      loading: false, // 查询按钮状态
      totalshow: true,
      select_department_list: [], // 部门下拉
      diseases: [], // 病种
      source_channel: [], // 渠道
      allot_source_channel: [], // 分配渠道
      tags_list: [], // 部门标签
      last_belong_member_list: [], // 上次归属人
      belong_member_list: [], // 归属人
      member_list: [], // 下次回访人
      department_list: [],
      statusList: [], // 患者状态
      ruleValidate: {
        // allot_member_ids:[{ required: true, message: '请选择归属人', trigger: 'change',type:'array' }],
        // allot_subdivided_channels_id:[{ required: true, message: '请选择渠道', trigger: 'change',type:'array' }]
      },
      type: 1, // 切换状态
      formloading: false,
      show: false,
      callList: [
        {
          value: 1,
          label: "只有电话",
        },
        {
          value: 2,
          label: "只有微信",
        },
        {
          value: 3,
          label: "无联系方式",
        },
        {
          value: 4,
          label: "有电话有微信",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    initial(e) {
      this.handleReset(this.dataValidate);
      this.member_list = [];
      this.total = "";
      this.radiotype = 0;
      // console.log(e,'e')
      this.type = e;
      this.getlist();
    },
    // 获取分配的所有下拉数据
    getlist() {
      this.show = true;
      allotList({
        select_type:
          +this.type == 1 ? 2 : +this.type == 2 ? 1 : +this.type == 3 ? 0 : "",
      }).then((res) => {
        this.select_department_list = res.condition.select_department_list; // 部门下拉
        this.department_list = res.condition.department_list;
        this.diseases = res.condition.diseases; // 病种
        this.source_channel = res.condition.source_channel; // 渠道
        this.allot_source_channel = res.condition.allot_source_channel; // 分配渠道
        this.tags_list = res.condition.tags_list; // 部门标签
        if (+this.type == 1) {
          this.last_belong_member_list = res.condition.select_sea_member_list; // 归属人
        } else if (+this.type == 2) {
          this.last_belong_member_list = res.condition.select_fish_member_list;
        } else {
          this.belong_member_list = res.condition.select_member_list; // 归属人
        }
        this.statusList = res.condition.status_list; // 患者状态
        this.show = false;
      });
    },
    // 查询数据
    reportData() {
      const params = {
        select_type:
          +this.type == 1 ? 2 : +this.type == 2 ? 1 : +this.type == 3 ? 0 : "",
        export_stime: this.formValidate.exportDate[0]
          ? this.$Date(this.formValidate.exportDate[0]).format("YYYY-MM-DD")
          : "",
        export_etime: this.formValidate.exportDate[1]
          ? this.$Date(this.formValidate.exportDate[1]).format("YYYY-MM-DD")
          : "",
        department_id: this.formValidate.department_id,
        belong_member_id:
          +this.type === 1
            ? -2
            : +this.type === 2
            ? -1
            : this.formValidate.belong_member_id
            ? this.formValidate.belong_member_id.join(",")
            : "",
        channel_id: this.formValidate.channel_id
          ? this.formValidate.channel_id
          : "",
        patient_diseases_id: this.formValidate.patient_diseases_id
          ? this.formValidate.patient_diseases_id.join(",")
          : "",
        tags_ids: this.formValidate.tags_ids
          ? this.formValidate.tags_ids.join(",")
          : "",
        last_callback_id: this.formValidate.last_callback_id
          ? this.formValidate.last_callback_id
          : "",
        last_belong_member_id: this.formValidate.last_belong_member_id
          ? this.formValidate.last_belong_member_id.join(",")
          : "",
        created_stime: this.formValidate.createdDate[0]
          ? this.$Date(this.formValidate.createdDate[0]).format("YYYY-MM-DD")
          : "",
        created_etime: this.formValidate.createdDate[1]
          ? this.$Date(this.formValidate.createdDate[1]).format("YYYY-MM-DD")
          : "",
        patient_status_id: this.formValidate.patient_status_id,
        have_contact_type: this.formValidate.have_contact_type.join(","),
        have_repeat: this.formValidate.have_repeat
          ? this.formValidate.have_repeat
          : "0",
      };
      return params;
    },
    checkCondition() {
      // 为选择筛选条件 && 未点击提交
      let params = this.reportData();
      let isSelectCondition = false;
      for (let i in params) {
        if (i === "belong_member_id" && this.type != 3) continue;

        if (params[i]) {
          isSelectCondition = true;
          break;
        }
      }
      return isSelectCondition;
    },
    changeSearch() {
      // 为选择筛选条件 && 未点击提交
      let isSelectCondition = this.checkCondition();
      if (isSelectCondition === false) {
        this.$Message.error("请选择筛选条件");
        return false;
      }

      this.loading = true;
      this.totalshow = false;

      allotTotal(this.reportData()).then((res) => {
        this.total = res.total;
        this.totalshow = true;
        this.loading = false;
      });
    },
    changeDept(e) {
      if (e) {
        getDeptMember({ department_id: e }).then((res) => {
          this.member_list = res;
        });
      }
    },
    handleSubmit(name) {
      let params2 = this.reportData();
      const data = {
        allot_department_id: this.formValidate.allot_department_id,
        allot_member_ids: this.formValidate.allot_member_ids
          ? this.formValidate.allot_member_ids.join(",")
          : "",
        allot_tag_id: this.formValidate.allot_tag_id,
        allot_subdivided_channels_id: this.formValidate
          .allot_subdivided_channels_id,
        allot_type: this.radiotype,
        ...params2,
      };
      // 为选择筛选条件 && 未点击提交
      let isSelectCondition = this.checkCondition();
      if (isSelectCondition === false) {
        this.$Message.error("请选择筛选条件");
        return false;
      }
      if (this.total === 0 || this.total === "") {
        this.$Message.error("筛选结果不存在");
        return false;
      }

      // 未选择归属人
      if (this.radiotype === 0 && !this.formValidate.allot_department_id) {
        this.$Message.error("请选择分配部门");
        return false;
      }

      this.formloading = true;

      allotv2(data)
        .then((res) => {
          this.formloading = false;
          this.$Message.success("分配成功");
          this.handleReset(name);
        })
        .catch((error) => {
          this.formloading = false;
        });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
      this.total = "";
      this.radiotype = 0;
    },
  },
};
</script>
<style scoped>
/deep/.ivu-form-inline .ivu-form-item {
  margin-right: 46px;
}
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
